import { useMemo } from 'react'
import styles from './index.module.less';
import ReactEcharts from 'echarts-for-react';
import { reSetData } from '@/utils/tool';
const colors = ['#0091FF', '#FA6400', '#00FFFF', '#6f7de3', '#088DFF', '#FF916C', '#FF9933', '#9E5CFF', '#F88CFF'];
const Lines = ({
    data,
    legendShow = true,
    grid = {
        top: "30%",
        bottom: '10%',
        left: '1%',
        right: '1%',
    },
    splitLineShow = true,
    splitLineLineStyleType = 'dashed',
    yAxisAxisLabelFormatter = (value) => {
        // console.log(value,'value')
        return value
    },
   
    yAxisPosition = 'right',
    tooltipShow = 'false',
    tooltipFormatter = (params) => {
        let today = null
        let yest = null
        let contStr = ``
        if (params && params.length) {
            contStr = params.map(it => {
                return `<div style="
                font-family: PingFang SC;
                font-size: .375rem;
                color: rgba(0, 0, 0, 0.65);
                display:flex;
                align-items:center;
                justify-content: space-between;
                "><div>${it.seriesName}：</div>
                <div>${ it.value && part ? parseFloat(it.value).toFixed(2):parseFloat(it.value).toFixed(0)}</div>
                </div>  `
            })
        }
        let str1 = ` <div style="
        font-family: PingFang SC;
        font-size: .375rem;
        color: rgba(0, 0, 0, 0.65);
        display:flex;
        align-items:center;
        margin-bottom:.2175rem;
        justify-content: space-between;
        "><div>${params[0].name}</div>
        </div> `

        const htmlStr = `<div style="
        display:flex;
        flex-direction:column;
        justify-content: space-between;
        // width:2.6875rem;
        background-color:#fff;
        box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.1);
        border-radius: .375rem;
        padding:.3125rem;
        box-sizing: border-box;
        ">

        `;
        let str2 = ` </div>`
        return htmlStr + str1 + contStr + str2;
    },
    xAxisInterval = 5,
    yAxisName = '',
    unit = '',
    part,
    chartSize={}
}) => {
    const { xAxis = [], lineData = [] } = data;
    let seriesData = [];
    let yAxis = {};

    const options = useMemo(() => {
        
        let sliceArrValue = []
        if (xAxis && xAxis.length && xAxisInterval !== 0) {
            const sliceArr = reSetData(xAxis, xAxisInterval)
            sliceArr.map((item, index) => {
                if (item.length && item.length == xAxisInterval) {
                    sliceArrValue.push(item[xAxisInterval - 1])
                } else {
                    sliceArrValue.push(item[item.length - 1])
                }
            })
        } else {
            sliceArrValue = xAxis
        }

        let val1 = lineData[0] && lineData[0].value || [];
        let val2 = lineData[1] && lineData[1].value || [];
 
        seriesData = lineData.map((item, index) => {
            let arr1 = [];
            let arr2 = [];
            xAxis.map((e1,indexs) => {
                if(parseFloat(val1[indexs]) >= parseFloat(val2[indexs]) || val2[indexs]==undefined){
                    arr1.push({value:val1[indexs],position:'top'})
                    arr2.push({value:val2[indexs],position:'bottom'})
                }else{
                    arr1.push({value:val1[indexs],position:'bottom'})
                    arr2.push({value:val2[indexs],position:'top'})
                }
            })

            return {
                name: item.name,
                type: "line",
                symbolSize: 4,
                z:item.name == '上周' ? 1:9,
                symbol: function (value, params) {
                    if (sliceArrValue.includes(params.name)) {
                        return 'circle'
                    } else {
                        return 'none'; //拐点不显示
                    }
                },
                itemStyle: {
                    // width: 1,
                    // color: colors[index],
                    normal: {
                        color: colors[index],
                        label: {
                            show: true, //开启显示
                            // position: 'top', //在上方显示
                            formatter:function(e){
                                // console.log(e,'indexs')
                                let {data, value} = e;
                                let num = parseFloat(value) || 0;
                                let arr = null;
                                if(part){
                                    arr = data.position == 'bottom' ? '{bottom|'+num.toFixed(2) +'}' : num.toFixed(2);
                                }else{
                                    arr = data.position == 'bottom' ? '{bottom|'+num.toFixed(0) +'}' : num.toFixed(0);
                                }
                                return arr;
                                // let num = parseFloat(e.value) || 0;
                                
                                // return num.toFixed(0);
                                
                            },
                            textStyle: { //数值样式
                                color: 'rgb(21, 70, 106)',
                                fontSize: 10,
                                rich:{
                                    bottom:{
                                        padding:[0,0,-35,0],
                                        fontSize: 10,
                                    }
                                }
                            }
                        },
                        lineStyle: {
                            normal: {
                                color: colors[index],
                            }
                        }
                    }
                },
                data: index == 0 ? arr1 : arr2
                // data: item.value
            }
        }
        );
        if(unit === '%'){
            yAxis = {
                name: yAxisName,
                nameTextStyle: {
                    color: "rgba(0, 0, 0, 0.65)",
                    nameLocation: "start",
                    padding:[10,0]
                },
                type: "value",
                minInterval:1,
                splitNumber:3,
                min: 0,  //取0为最小刻度
                max: 100, //取100为最大刻度
                interval: 25, // 刻度间隔
                position: yAxisPosition,//坐标轴位置，移至右边
                scale: true,
                splitLine: {
                    show: splitLineShow,
                    lineStyle: {
                        color: 'rgb(217, 217, 217)',
                        width: 1,
                        type: splitLineLineStyleType,
                    }
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: 'rgba(56, 145, 255, 0.4)',
                        width: 1
                    }
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: 'rgba(0, 0, 0, 0.65)',
                        fontSize: 12
                    },
                    formatter: yAxisAxisLabelFormatter
                }

            }
        }else{
            yAxis = {
                name: yAxisName,
                nameTextStyle: {
                    color: "rgba(0, 0, 0, 0.65)",
                    nameLocation: "start",
                    padding:[10,0]

                },
                type: "value",
                minInterval:1,
                splitNumber:3,
                min: 0,  //取0为最小刻度
                // max:"dataMax",
                position: yAxisPosition,//坐标轴位置，移至右边
                scale: true,
                splitLine: {
                    show: splitLineShow,
                    lineStyle: {
                        color: 'rgb(217, 217, 217)',
                        width: 1,
                        type: splitLineLineStyleType,
                    }
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: 'rgba(56, 145, 255, 0.4)',
                        width: 1
                    }
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: 'rgba(0, 0, 0, 0.65)',
                        fontSize: 12
                    },
                    formatter: yAxisAxisLabelFormatter
                }

            }
        }
        return {
            tooltip: {
                show: tooltipShow,
                trigger: "axis",
                backgroundColor: 'rgba(30,144,255,0.7)',
                borderColor: '#1E90FF',
                triggerOn: "mousemove|click",
                borderWidth: 0,
                // alwaysShowContent: true,
                padding: 0,
                borderRadius: '.375rem',
                backgroundColor: 'rgba(0, 0, 0, 0)',
                confine: true,
                className: styles['echarts-tooltip'],
                textStyle: {
                    color: '#fff'
                },
                formatter: tooltipFormatter,
            },
            legend: {
                show: legendShow,
                align: 'right',
                left: '60%',//距离左边距
                itemWidth: 16,//图标宽
                itemHeight: 8,//图标高
                // icon:"arrow",
                data: [
                    {
                        icon: "image://",
                        name: lineData[0]?.name || ''
                    },
                    {
                        icon: "image://",
                        name: lineData[1]?.name || ''
                    }
                ],
                textStyle: {
                    color: "rgba(0, 0, 0, 0.5)",
                    fontSize: 12,
                },
            },
            grid: {
                ...grid,
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    axisLine: {
                        show: data.length > 0 ? true : false,
                        lineStyle: {
                            color: 'rgba(56, 145, 255, 0.4)',
                            width: 1
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(56, 145, 255, 0.4)',
                            width: 1
                        }
                    },
                    axisLabel: {
                        interval: xAxisInterval,//interval为x轴两相邻数据之间所包含数据条数
                        // showMinLabel: true,//显示最小值
                        // showMaxLabel: true,//显示最大值
                        margin:15,
                        formatter: function (value) {
                            let valueTxt = '';
                            if (value.length > 16) {
                                valueTxt = value.substring(0, 16) + '...';
                            }
                            else {
                                valueTxt = value;
                            }
                            return valueTxt;
                        },
                        show: true,
                        textStyle: {
                            color: 'rgba(0, 0, 0, 0.65)',
                            fontSize: 12,
                            itemWidth: 60,
                        },
                    },
                    data: xAxis
                }],
            yAxis: yAxis,
            series: seriesData
        };
    }, [data, unit, part]);
    return (
        <div className={styles.echarts} id='chart'>
            {xAxis.length ? <ReactEcharts
                style={{
                    position: 'absolute',
                    width: chartSize.width || '100%',
                    height: chartSize.height || '100%',
                }}
                option={options}
                notMerge={true}
                opts={{ devicePixelRatio: 2 }}
                // animation={false}
            /> : <div className={styles.noData}>暂无数据</div>}
            {/* {
                !xAxis.length && <div className={styles.noData}>暂无数据</div>
            } */}
        </div>
    );
}

export default Lines